<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>公告类型</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>

<script type="text/javascript" src="./verify.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <style>
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            min-height: 200px;
        }
    </style>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">公告类型</a>
            <a>
              <cite>公告撰写</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">

        </div>
    </div>
</div>


</body>
<div>
    <div id="toolbar-container" class="toolbar"></div>
    <p style="height: 50px"></p>
    <div id="text-container" class="text"></div>
</div>

<div id="confirm" hidden>
    <div style="margin-top: 50px;margin-left: 60px">
        <label class="layui-form-label">公告名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="请输入" id="title" autocomplete="off" class="layui-input"/>
        </div>
    </div>
    <div style="margin-top: 20px;margin-left: 60px">
        <button type="button" id="confirmBtn" class="layui-btn  layui-btn-lg">确认</button>
        <button type="button"  id="cancleBtn" class="layui-btn  layui-btn-lg">取消</button>
    </div>
</div>

<button type="button" class="layui-btn layui-btn-lg" id="publish">发布</button>
<!-- 引入 wangEditor.min.js -->
<script>
    const E = window.wangEditor
    const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
    editor.config.placeholder = '请输入公告内容'
    editor.create()
    layui.use(['layer'], function(){
        var layer = layui.layer;

        var $=layui.jquery

        var index;
        $("#publish").click(function ()
        {

            index=layer.open({
                type: 1,
                area: ['300px', '300px'],
                content: $('#confirm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
            layer.title("发布公告",index)

            $("#confirmBtn").click(function (){
                //获取公告里面写的html内容
                var html=editor.txt.html();
                let title=$("#title").val()
                if(title===""||title===undefined)
                {
                    layer.msg("请填写公告名称",{icon:5})
                    return;
                }

                $.ajax({
                    url: "get_notice_data",
                    type: 'post',
                    data: {'title':title,"notice":html,"token":window.localStorage.managerToken},
                    success: function (res)
                    {
                        if(res.status==="handle_success")
                        {
                            layer.msg("处理成功",{icon:1})
                          //清空公告名称
                            $("#title").val("")
                            //清空公告
                            editor.txt.clear()
                            layer.close(index);
                        }
                        else if(res.status==="token_error")
                        {
                            layer.msg('令牌错误', {
                                icon: 5,
                                time: 2000
                            }, function(){
                                window.location.assign("/")
                            });
                        }
                        else
                        {
                            layer.msg("出现异常",{icon:5})
                            layer.close(index);
                        }
                    },
                    error: function ()
                    {
                        layer.msg("出现异常",{icon:5})
                        layer.close(index);
                    }

                })
            })
        })

        //点击取消按钮
        $("#cancleBtn").click(function (){
            layer.close(index);
        })


    });
</script>
</html>